<!--
 * @Author: your name
 * @Date: 2021-08-31 17:40:49
 * @LastEditTime: 2021-11-20 20:27:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\userPerfix\setting.vue
-->
<template>
  <DaicDrawer icon="seting">
    <template #titleToolbar>
      {{ $t('Drawer.overall') }}
    </template>
    <template #content>
      <div v-if="isShow" class="loading">
        <Spin />
      </div>
      <div class="set_content">
        <!-- 模式设置 -->
        <div class="set_content_theme cell">
               <Divider>
                <p class="titles">{{ $t('Drawer.mode') }}</p>
              </Divider>
              <div class="modes">
                <VSwitch @handleClick="handleClicks" :cheched="mode" :isload="isloads"></VSwitch>
              </div>
            
        </div>
        <div class="set_content_theme cell">
          <Divider>
            <p class="titles">{{ $t('Drawer.theme') }}</p>
          </Divider>
          <div class="set_content_theme_list">
            <div
              v-for="(item, index) in ThemeArr"
              :key="index"
              class="set_content_theme_list-item"
              :style="{
                borderColor: defaultTheme == item.name ? item.color : ''
              }"
              @click="onUpdateTheme(index)"
            >
              <Tooltip>
                <template #title>
                  {{ item.name }}
                </template>
                <div :class="[`primary-${item.name}-color`]"></div>
              </Tooltip>
            </div>
          </div>
        </div>
        <!-- 国际化 -->
        <div class="set_content_locale cell">
          <Divider>
            <p class="titles">{{ $t('Drawer.language') }}</p>
          </Divider>
          <div class="set_content_theme_list">
            <RadioGroup v-model:value="defaultLangs" size="small" :default-value="defaultLangs" @change="onChangelocale">
              <RadioButton value="ch">
                <p>中文</p>
              </RadioButton>
              <RadioButton value="en">
                <p>English</p>
              </RadioButton>
            </RadioGroup>
          </div>
        </div>
        <!-- 其他 -->
        <div class="set_content_Other cell">
          <Divider>
            <p class="titles">{{ $t('Drawer.Pagemanipulation') }}</p>
          </Divider>
          <div class="set_content_theme_switch">
            <SwitchItem :title="$t('SwitchItem.Collapsemenu')" :checked-children="$t('SwitchItem.on')" :un-checked-children="$t('SwitchItem.off')" :checktype="getTriggersStatus" @change="updateMenu"></SwitchItem>
            <SwitchItem :title="$t('SwitchItem.wartermark')" :checked-children="$t('SwitchItem.on')" :un-checked-children="$t('SwitchItem.off')" :checktype="status" @change="updateWartermark"></SwitchItem>
            <SwitchItem :title="$t('SwitchItem.RouterName')" :checked-children="$t('SwitchItem.on')" :un-checked-children="$t('SwitchItem.off')" :checktype="getRouterStatus" @change="updateRouter"></SwitchItem>
            <SwitchItem :title="$t('SwitchItem.Pinexpandmenu')" :checked-children="$t('SwitchItem.on')" :un-checked-children="$t('SwitchItem.off')" :disabled="true" @change="updateMenu"></SwitchItem>
          </div>
        </div>
        <div class="set_content_Other cell">
          <Divider>
            <p class="titles">{{ $t('Drawer.Other') }}</p>
          </Divider>
          <div class="set_content_theme_bar">
            <div>
              <Button :loading="isShow" type="primary" ghost block @click="onInitConfig">
                {{ $t('button.Clearcache') }}
              </Button>
            </div>
            <div>
              <Button type="primary" ghost block @click="ClipbroadCopy">
                {{ $t('button.copy') }}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </template>
  </DaicDrawer>
</template>
<script lang="ts">
import { defineComponent, ref, toRaw, computed, unref } from 'vue';
import { DaicDrawer } from '../../components/Drawer/index';
import { colorConfig } from '../../setting/themeConfig';
import { Tag, Tooltip, Button, Divider, Spin, Radio } from 'ant-design-vue';
import { updateTheme,onChangeMode } from '../../setting/theme';
import SwitchItem from '../../components/Switch/Switch.vue';
import { setTrigter, routerTrigger, initConfig } from '../../setting/menuTrigger';
import { updateLang } from '../../setting/locales/useI18n';
import { GetLocalStrong } from '../../ntils/hooks';
import { Wallmark, getMarkStatus } from '@/hooks/useWatermark';
import { ClipboardData } from '@/hooks/useCopy';
import VSwitch from './VSwitch.vue';
type ThemeType = {
  name: String;
  color: String;
};
export default defineComponent({
  name: 'Setting',
  components: {
    VSwitch,
    DaicDrawer,
    Tag,
    Tooltip,
    Button,
    SwitchItem,
    Divider,
    Spin,
    Radio,
    RadioGroup:Radio.Group,
    RadioButton:Radio.Button
  },
  setup() {
    let appmode = GetLocalStrong('APP_MODE');;
    // 模式
    let mode = ref();
    mode.value = appmode==='dark';
    // 水印状态
    let wm = new Wallmark();
    // 远程水印状态
    let status = computed(() => unref(getMarkStatus()));
    let langs = GetLocalStrong('APP_LANG_LOCAL');
    let theme = GetLocalStrong('APP_THEME_LOCAL');
    let langvalue = ref('ch');
    let isShow = ref<Boolean>(false);
    let ThemeArr: Array<ThemeType> = toRaw([]);
    let { menuTriggers } = setTrigter();
    let { routerRefsValue } = routerTrigger();
    let isloads = ref();
    isloads.value=false;
    // 默认语言
    let defaultLangs = ref('ch');
    defaultLangs.value = langs || 'ch';
    // 默认主题
    let defaultTheme = ref('hailan');
    defaultTheme.value = theme || 'hailan';
    // 切换模式
    const handleClicks = (e)=>{
        
        isloads.value=true;
        setTimeout(()=>{
          mode.value = e;
          isloads.value=false;
           onChangeMode(e);
        },300)
       
    }
    // 获取菜单栏展示状态 与 菜单栏联动
    const getTriggersStatus = computed(() => {
      const status = unref(menuTriggers);
      return status;
    });
    // 路由导航
    const getRouterStatus = computed(() => {
      const status = unref(routerRefsValue);
      return status;
    });

    // 主题列表
    for (let item in colorConfig) {
      let obj: ThemeType = {
        name: item,
        color: colorConfig[item]['@primary-color']
      };
      ThemeArr.push(obj);
    }
    // 切换主题
    const onUpdateTheme = function (index): any {
      isShow.value = true;
      defaultTheme.value = ThemeArr[index].name;

      setTimeout(() => {
        isShow.value = false;
        updateTheme(ThemeArr[index].name);
      }, 500);
    };
    // 国际化
    const onChangelocale = function (e): void {
      let langs = e.target.value;
      isShow.value = true;
      defaultLangs.value = langs;
      setTimeout(() => {
        isShow.value = false;
        updateLang(langs);
      }, 500);
    };
    // 折叠菜单
    const updateMenu = function (): void {
      setTrigter();
    };
    const updateRouter = function (): void {
      routerTrigger();
    };
    // 更改水印状态
    const updateWartermark = e => {
      if (e) {
        wm.createDiv('韶华倾负');
      } else {
        wm.clearWallmark();
      }
    };
    // 初始化
    const onInitConfig = () => {
      isShow.value = true;
      setTimeout(() => {
        isShow.value = false;
        wm.clearWallmark();
        initConfig();
        updateLang('ch');
        updateTheme('jinghong');
        defaultTheme.value = 'jinghong';
        defaultLangs.value = 'ch';
      }, 100);
    };
    // 拷贝
    const ClipbroadCopy = e => {
      const text = window.location.href;
      ClipboardData(text);
    };
    return {
      updateWartermark,
      ClipbroadCopy,
      handleClicks,
      ThemeArr,
      onUpdateTheme,
      updateMenu,
      defaultTheme,
      defaultLangs,
      langvalue,
      onChangelocale,
      isShow,
      getTriggersStatus,
      updateRouter,
      getRouterStatus,
      status,
      onInitConfig,
      mode,
      isloads
    };
  }
});
</script>

<style lang="less" scoped>
@import '../../styles/commit.less';
.modes{
    width: 100%;
    display: flex;
    justify-content: center;
}
.loading {
  width: 100%;
  height: 100%;
  background: rgba(208, 208, 233, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.set_content {
  color: #666;

  .titles {
    color: #666;
    font-size: 12px;
  }
  .cell {
    margin: 25px 0;
  }

  &_theme {
    &_list {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      p {
        font-size: 12px;
      }
      &-item {
        width: 1.5rem;
        height: 1.5rem;
        border: 2px solid rgba(61, 61, 107, 0.1);
        padding: 2px;
        box-sizing: border-box;
        margin: 0 5px;
        & > div {
          height: 100%;
          width: 100%;
          cursor: pointer;
        }
      }
    }
    &_switch {
      display: flex;
      flex-direction: column;
      & > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 3px 0;
        & > span:nth-of-type(1) {
          color: #666;
          font-size: 12px;
        }
      }
    }
    &_bar {
      display: flex;
      flex-direction: column;
      & > div {
        margin: 5px 0;
        button {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
